<template>
    <div>
        <el-card shadow="never" class="!border-none">
            <el-text>
                基于 Vue3 + TS + Vite + Pinia + Tailwindcss 创建的 后台管理 基础项目，可用于快速搭建后台前端框架，开箱即用<br>
                <br>
                使用UI： [Element Plus](https://element-plus.org/zh-CN/)<br>
                <br>
                使用Tailwindcss： [Tailwindcss](https://www.tailwindcss.cn/docs/installation)<br>
                <br>
                使用ICON图标： [IconPark](https://iconpark.oceanengine.com/official)<br>
                <br>
                使用wangEditor富文本编辑器： [wangEditor V5](https://www.wangeditor.com/v5)
            </el-text>
            <div class="border rounded-sm mt-6">
                <Toolbar class="border-b" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
                <Editor class="!h-96" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
                    @onCreated="handleCreated" />
            </div>
        </el-card>
    </div>

</template>

<script setup lang="ts">
import { computed, ref, watch, shallowRef } from 'vue'
import { settingMode } from "@/stores/setting";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { type IToolbarConfig, type IEditorConfig } from '@wangeditor/editor'
const settingsStore = settingMode()

const editorRef = shallowRef()

const mode = ref('simple')
const valueHtml = ref('hello world')
const toolbarConfig: Partial<IToolbarConfig> = {
    // const toolbarConfig = {                        // JS 语法
    /* 工具栏配置 */
}
// 初始化 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    MENU_CONF: {},
    // 其他属性...
}

const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // console.log(editorRef.value, 'editor')

}

</script>
<style scoped></style>